<template>
  <div class="sellHeader">
    <div class="Shop">
      <div class="header-iocn">
        <img :src="seller.avatar" />
      </div>
      <div class="header-content">
        <div class="title">
          <span class="title-icon">
            <img src="~static/header_img/brand@2x.png" />
          </span>
          <div class="title-desc">这是店铺名称</div>
        </div>
        <div class="remake">这是商品描述备注</div>
        <div class="active">
          <span class="active-icon"></span>
          <div class="active-desc">测试测试测试测试</div>
        </div>
        <div
          class="support-count"
          @click="showFloating"
        >
          <div class="count">5个</div>
          <span class="count-arrow"></span>
        </div>
      </div>
    </div>
    <div class="announcement">
      <span class="anno-icon">
        <img
          src="~static/header_img/bulletin@2x.png"
          alt
        />
      </span>
      <div class="anno-desc">测试测试测试测试测试测试测试测试测试测试测试</div>
      <span class="anno-arrow"></span>
    </div>
    <div class="bgi">
      <img
        :src="seller.avatar"
        alt
      />
    </div>
    <floating
      @showFloating="showFloating"
      :showDetial="showDetial"
    ></floating>
  </div>
</template>

<script>
import floating from './floating'

export default {
  name: 'sellHeader',
  components: { floating },
  props: {
    seller: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data () {
    return {
      showDetial: false
    }
  },
  methods: {
    showFloating () {
      let showDetialed = !this.showDetial
      this.showDetial = showDetialed
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixin'
.sellHeader
  position relative
  .Shop
    width 100%
    height 104px
    // color: rgba(7, 17, 27, 0.5);
    background-color rgba(7, 17, 27, 0.5)
    display flex
    .header-iocn
      // overflow: hidden;
      width 110px
      height 91px
      position relative
      &>img
        position absolute
        // overflow: hidden;
        top 24px
        left 24px
        right 16px
        bottom 18px
        width 64px
        height 64px
    .header-content
      flex 1
      position relative
      .title
        position absolute
        top 24px
        color rgb(255, 255, 255)
        font-size 16px
        font-weight bold
        height 18px
        line-height 18px
        overflow hidden
        display flex
        .title-icon
          img
            width 27px
            height 16px
          .title-desc
            flex 1
      .remake
        color rgb(255, 255, 255)
        font-size 12px
        font-weight 200
        height 12px
        line-height 12px
        position absolute
        top 47px
      .active
        color rgb(255, 255, 255)
        font-size 8px
        font-weight 200
        height 12px
        line-height 12px
        position absolute
        top 74px
      .support-count
        position absolute
        right 12px
        top 30px
        border-radius 14px
        background-color darkgrey
        width 50px
        height 25px
        display flex
        .count-arrow
          width 15px
          flex 1
        .count
          width 35px
          line-height 25px
          font-size 12px
          text-align center
          color #fff
  .announcement
    position relative
    display flex
    background-color rgba(7, 17, 27, 0.2)
    width 100%
    height 28px
    line-height 28px
    overflow hidden
    // position: relative;
    .anno-icon
      position absolute
      left 12px
    .anno-desc
      position absolute
      height 28px
      left 62px
      right 12px
      font-size 16px
      color rgb(255, 255, 255)
  .bgi
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    z-index -1
    blur 10px
    img
      width 100%
      height 100%
</style>
